<script setup lang="ts">
import { onMounted, ref } from "vue";
import TestCache from "./components/TestCache.vue"; // 缓存
import TestDrag from "./components/TestDrag.vue"; // 拖拽
import TestResize from "./components/TestResize.vue"; // resize
import TestLazy from "./components/TestLazy.vue"; // 懒加载
import TestBase64 from "./components/TestBase64.vue"; // base64
import TestFile from "./components/TestFile.vue"; // File
import TestScroll from "./components/TestScroll.vue"; // 滚动

const current = ref(0);
const list = [
  TestCache,
  TestDrag,
  TestResize,
  TestLazy,
  TestBase64,
  TestFile,
  TestScroll,
];
const onChange = (i: number) => {
  current.value = i;
  const searchParams = new URLSearchParams(window.location.search);
  searchParams.set("i", i.toString());
  const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
  history.replaceState(null, "", newUrl);
  // 记录当前选中的tab
  localStorage.setItem("navIndex", i.toString());
};

onMounted(() => {
  // 记录当前选中的tab
  const navIndex = location.search.match(/\?i\=(\d+)/)?.[1];
  if (navIndex) {
    current.value = Number(navIndex);
  } else {
    const navIndex = localStorage.getItem("navIndex");
    if (navIndex) {
      current.value = Number(navIndex);
    }
  }
});
</script>

<template>
  <div class="app-container">
    <div class="tab-container">
      <span
        v-for="(item, i) of list"
        :key="i"
        @click="onChange(i)"
        :class="{ active: Number(current) === i }"
        >{{ item.__name }}</span
      >
    </div>
    <component :is="list[current]" />
  </div>
</template>

<style lang="scss">
.app-container {
  .tab-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #9e9e9e;
    padding: 10px;
    margin-bottom: 10px;

    span {
      padding: 1px 10px;
      cursor: pointer;

      &.active {
        color: #42b983;
      }

      & + span {
        border-left: 1px solid #9e9e9e;
      }
    }
  }
  button,
  input {
    margin-right: 10px;
    border: 1px solid #9e9e9e;
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
  }
}
</style>
